<template>
  <div class="homepage">
    <!-- 轮播图英雄区域 -->
    <section class="hero-section">
      <div class="carousel-container">
        <div class="carousel-slide active">
          <img
            src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=1200&h=600&fit=crop"
            alt="AI课程推广"
          />
          <div class="slide-content">
            <h2>人工智能基础课程</h2>
            <p>从零开始学习AI，掌握机器学习核心技术</p>
            <button class="cta-button">立即学习</button>
          </div>
        </div>
        <div class="carousel-slide">
          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=600&fit=crop"
            alt="编程课程"
          />
          <div class="slide-content">
            <h2>Python编程实战</h2>
            <p>全栈开发必备技能，项目实战教学</p>
            <button class="cta-button">开始编程</button>
          </div>
        </div>
        <div class="carousel-slide">
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=600&fit=crop"
            alt="数据科学"
          />
          <div class="slide-content">
            <h2>数据科学与分析</h2>
            <p>大数据时代的核心技能，职场必备</p>
            <button class="cta-button">探索数据</button>
          </div>
        </div>
      </div>
      <div class="carousel-dots">
        <span class="dot active" @click="currentSlide = 0"></span>
        <span class="dot" @click="currentSlide = 1"></span>
        <span class="dot" @click="currentSlide = 2"></span>
      </div>
    </section>

    <!-- 正在直播 -->
    <section class="live-section">
      <div class="section-header">
        <h2>🔴 正在直播</h2>
        <button class="more-btn">查看更多</button>
      </div>
      <div class="live-grid">
        <div class="live-card featured">
          <div class="live-badge">直播中</div>
          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=400&h=225&fit=crop"
            alt="深度学习直播"
          />
          <div class="live-info">
            <h3>深度学习实战课程</h3>
            <p class="instructor">张教授</p>
            <div class="live-stats">
              <span>👥 1,234人在线</span>
              <span>⏰ 已直播2小时</span>
            </div>
          </div>
        </div>
        <div class="live-card">
          <div class="live-badge">直播中</div>
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&h=169&fit=crop"
            alt="数据分析直播"
          />
          <div class="live-info">
            <h3>Python数据分析</h3>
            <p class="instructor">李老师</p>
            <div class="live-stats">
              <span>👥 856人在线</span>
            </div>
          </div>
        </div>
        <div class="live-card">
          <div class="live-badge">直播中</div>
          <img
            src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=300&h=169&fit=crop"
            alt="机器学习直播"
          />
          <div class="live-info">
            <h3>机器学习算法</h3>
            <p class="instructor">王博士</p>
            <div class="live-stats">
              <span>👥 642人在线</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门推荐 -->
    <section class="recommended-section">
      <div class="section-header">
        <h2>🔥 热门推荐</h2>
        <button class="more-btn">查看更多</button>
      </div>
      <div class="recommended-grid">
        <div class="course-card featured">
          <div class="rank-badge">TOP 1</div>
          <img
            src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=400&h=225&fit=crop"
            alt="AI课程"
          />
          <div class="course-info">
            <h3>人工智能全栈开发</h3>
            <p class="instructor">陈教授 · 清华大学</p>
            <div class="course-stats">
              <span>⭐ 4.9</span>
              <span>👥 12,345人学习</span>
              <span class="price">￥299</span>
            </div>
            <p class="description">从基础到实战，全面掌握AI开发技能</p>
          </div>
        </div>
        <div class="course-card">
          <div class="rank-badge">TOP 2</div>
          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&h=169&fit=crop"
            alt="Python课程"
          />
          <div class="course-info">
            <h3>Python零基础入门</h3>
            <p class="instructor">刘老师</p>
            <div class="course-stats">
              <span>⭐ 4.8</span>
              <span>👥 8,976人学习</span>
              <span class="price">￥199</span>
            </div>
          </div>
        </div>
        <div class="course-card">
          <div class="rank-badge">TOP 3</div>
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&h=169&fit=crop"
            alt="数据科学"
          />
          <div class="course-info">
            <h3>数据科学实战</h3>
            <p class="instructor">赵博士</p>
            <div class="course-stats">
              <span>⭐ 4.7</span>
              <span>👥 6,543人学习</span>
              <span class="price">￥259</span>
            </div>
          </div>
        </div>
        <div class="course-card">
          <img
            src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=300&h=169&fit=crop"
            alt="Web开发"
          />
          <div class="course-info">
            <h3>前端开发进阶</h3>
            <p class="instructor">孙老师</p>
            <div class="course-stats">
              <span>⭐ 4.6</span>
              <span>👥 5,234人学习</span>
              <span class="price">￥229</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 录播课程分类 -->
    <section class="categories-section">
      <div class="section-header">
        <h2>📚 录播课程</h2>
        <button class="more-btn">查看更多</button>
      </div>
      <div class="categories-grid">
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=300&h=200&fit=crop"
            alt="人工智能"
          />
          <div class="category-info">
            <h3>人工智能</h3>
            <p>126门课程</p>
          </div>
        </div>
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&h=200&fit=crop"
            alt="编程开发"
          />
          <div class="category-info">
            <h3>编程开发</h3>
            <p>89门课程</p>
          </div>
        </div>
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&h=200&fit=crop"
            alt="数据科学"
          />
          <div class="category-info">
            <h3>数据科学</h3>
            <p>67门课程</p>
          </div>
        </div>
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=300&h=200&fit=crop"
            alt="前端开发"
          />
          <div class="category-info">
            <h3>前端开发</h3>
            <p>54门课程</p>
          </div>
        </div>
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=300&h=200&fit=crop"
            alt="后端开发"
          />
          <div class="category-info">
            <h3>后端开发</h3>
            <p>43门课程</p>
          </div>
        </div>
        <div class="category-card">
          <img
            src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
            alt="移动开发"
          />
          <div class="category-info">
            <h3>移动开发</h3>
            <p>32门课程</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 新闻资讯 -->
    <section class="news-section">
      <div class="section-header">
        <h2>📰 新闻资讯</h2>
        <button class="more-btn">查看更多</button>
      </div>
      <div class="news-grid">
        <div class="news-card featured">
          <img
            src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=225&fit=crop"
            alt="AI新闻"
          />
          <div class="news-info">
            <span class="news-tag">AI前沿</span>
            <h3>ChatGPT-5即将发布，AI教育迎来新变革</h3>
            <p>最新的大语言模型技术将如何改变在线教育行业...</p>
            <div class="news-meta">
              <span>2024-01-15</span>
              <span>阅读量: 12.5k</span>
            </div>
          </div>
        </div>
        <div class="news-card">
          <img
            src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=300&h=169&fit=crop"
            alt="编程新闻"
          />
          <div class="news-info">
            <span class="news-tag">技术趋势</span>
            <h3>2024年最受欢迎的编程语言排行榜</h3>
            <div class="news-meta">
              <span>2024-01-12</span>
              <span>8.3k</span>
            </div>
          </div>
        </div>
        <div class="news-card">
          <img
            src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=300&h=169&fit=crop"
            alt="数据新闻"
          />
          <div class="news-info">
            <span class="news-tag">行业动态</span>
            <h3>大数据分析师薪资调研报告</h3>
            <div class="news-meta">
              <span>2024-01-10</span>
              <span>6.7k</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 论文研究 -->
    <section class="papers-section">
      <div class="section-header">
        <h2>📄 论文研究</h2>
        <button class="more-btn">查看更多</button>
      </div>
      <div class="papers-grid">
        <div class="paper-card">
          <div class="paper-info">
            <span class="paper-tag">Nature</span>
            <h3>Attention Is All You Need: Transformer架构的突破性研究</h3>
            <p class="authors">Vaswani, A. et al.</p>
            <p class="abstract"
              >本文提出了Transformer模型，完全基于注意力机制，在机器翻译任务上取得了突破性进展...</p
            >
            <div class="paper-stats">
              <span>引用: 45,678</span>
              <span>发表: 2017</span>
              <span>影响因子: 42.8</span>
            </div>
          </div>
        </div>
        <div class="paper-card">
          <div class="paper-info">
            <span class="paper-tag">ICML</span>
            <h3>Deep Residual Learning for Image Recognition</h3>
            <p class="authors">He, K. et al.</p>
            <p class="abstract"
              >提出了残差网络(ResNet)架构，解决了深度神经网络训练中的梯度消失问题...</p
            >
            <div class="paper-stats">
              <span>引用: 89,234</span>
              <span>发表: 2016</span>
            </div>
          </div>
        </div>
        <div class="paper-card">
          <div class="paper-info">
            <span class="paper-tag">NeurIPS</span>
            <h3>Generative Adversarial Networks</h3>
            <p class="authors">Goodfellow, I. et al.</p>
            <p class="abstract">介绍了生成对抗网络(GAN)的概念，开创了生成式AI的新纪元...</p>
            <div class="paper-stats">
              <span>引用: 67,891</span>
              <span>发表: 2014</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    name: 'HomePage',
    data() {
      return {
        currentSlide: 0,
      };
    },
    watch: {
      currentSlide() {
        this.updateCarousel();
      },
    },
    mounted() {
      // 轮播图自动切换
      setInterval(() => {
        this.currentSlide = (this.currentSlide + 1) % 3;
        this.updateCarousel();
      }, 5000);
    },
    methods: {
      updateCarousel() {
        const slides = document.querySelectorAll('.carousel-slide');
        const dots = document.querySelectorAll('.dot');

        slides.forEach((slide, index) => {
          slide.classList.toggle('active', index === this.currentSlide);
        });

        dots.forEach((dot, index) => {
          dot.classList.toggle('active', index === this.currentSlide);
        });
      },
    },
  };
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .homepage {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    background: #f8fafc;
    min-height: 100vh;
  }

  /* 轮播图英雄区域 */
  .hero-section {
    position: relative;
    margin-bottom: 60px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .carousel-container {
    position: relative;
    height: 400px;
  }

  .carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }

  .carousel-slide.active {
    opacity: 1;
  }

  .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    padding: 60px 40px 40px;
  }

  .slide-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .slide-content p {
    font-size: 1.2rem;
    margin-bottom: 24px;
    opacity: 0.9;
  }

  .cta-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .cta-button:hover {
    background: #2563eb;
    transform: translateY(-2px);
  }

  .carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .dot.active {
    background: white;
    transform: scale(1.2);
  }

  /* 通用样式 */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }

  .section-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
  }

  .more-btn {
    background: #f1f5f9;
    color: #64748b;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .more-btn:hover {
    background: #e2e8f0;
    color: #475569;
  }

  /* 直播区域 */
  .live-section {
    margin-bottom: 60px;
  }

  .live-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
  }

  .live-card {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .live-card:hover {
    transform: translateY(-4px);
  }

  .live-card.featured {
    grid-row: span 1;
  }

  .live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 2;
  }

  .live-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .live-card.featured img {
    height: 250px;
  }

  .live-info {
    padding: 20px;
  }

  .live-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
  }

  .instructor {
    color: #64748b;
    margin-bottom: 12px;
  }

  .live-stats {
    display: flex;
    gap: 16px;
    font-size: 0.875rem;
    color: #64748b;
  }

  /* 推荐课程 */
  .recommended-section {
    margin-bottom: 60px;
  }

  .recommended-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 24px;
  }

  .course-card {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
  }

  .course-card:hover {
    transform: translateY(-4px);
  }

  .course-card.featured {
    grid-row: span 1;
  }

  .rank-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #f59e0b;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 2;
  }

  .course-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .course-card.featured img {
    height: 220px;
  }

  .course-info {
    padding: 20px;
  }

  .course-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
  }

  .course-stats {
    display: flex;
    gap: 12px;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .price {
    color: #ef4444 !important;
    font-weight: 600;
  }

  .description {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  /* 分类区域 */
  .categories-section {
    margin-bottom: 60px;
  }

  .categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .category-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .category-card:hover {
    transform: translateY(-4px);
  }

  .category-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }

  .category-info {
    padding: 20px;
    text-align: center;
  }

  .category-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
  }

  .category-info p {
    color: #64748b;
  }

  /* 新闻区域 */
  .news-section {
    margin-bottom: 60px;
  }

  .news-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 24px;
  }

  .news-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .news-card:hover {
    transform: translateY(-4px);
  }

  .news-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
  }

  .news-card.featured img {
    height: 200px;
  }

  .news-info {
    padding: 20px;
  }

  .news-tag {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .news-info h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 12px 0 8px;
    line-height: 1.4;
  }

  .news-info p {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 12px;
  }

  .news-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: #94a3b8;
  }

  /* 论文区域 */
  .papers-section {
    margin-bottom: 60px;
  }

  .papers-grid {
    display: grid;
    gap: 24px;
  }

  .paper-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .paper-card:hover {
    transform: translateY(-4px);
  }

  .paper-tag {
    background: #8b5cf6;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .paper-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 12px 0 8px;
    line-height: 1.4;
  }

  .authors {
    color: #64748b;
    font-size: 0.875rem;
    margin-bottom: 12px;
  }

  .abstract {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 16px;
  }

  .paper-stats {
    display: flex;
    gap: 20px;
    font-size: 0.75rem;
    color: #94a3b8;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .homepage {
      padding: 0 16px;
    }

    .live-grid,
    .recommended-grid,
    .news-grid {
      grid-template-columns: 1fr;
    }

    .categories-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .slide-content h2 {
      font-size: 1.8rem;
    }

    .slide-content p {
      font-size: 1rem;
    }

    .section-header h2 {
      font-size: 1.5rem;
    }
  }

  @media (max-width: 480px) {
    .categories-grid {
      grid-template-columns: 1fr;
    }

    .carousel-container {
      height: 300px;
    }

    .slide-content {
      padding: 40px 20px 20px;
    }

    .slide-content h2 {
      font-size: 1.5rem;
    }
  }
</style>
